<template>
  <NCard title="搜索条件" class="mb-4">
    <NGrid :cols="24" :x-gap="16">
      <NGi :span="6">
        <NFormItem label="剧本名称" path="scriptName">
          <NInput
            v-model:value="model.scriptName"
            placeholder="请输入剧本名称"
            clearable
            @keyup.enter="handleSearch"
          />
        </NFormItem>
      </NGi>
      <NGi :span="6">
        <NFormItem label="健康状态" path="healthStatus">
          <NSelect
            v-model:value="model.healthStatus"
            placeholder="请选择健康状态"
            clearable
            :options="healthStatusOptions"
          />
        </NFormItem>
      </NGi>
      <NGi :span="6">
        <NFormItem label="并发量" path="concurrency">
          <NSelect
            v-model:value="model.concurrency"
            placeholder="请选择并发量"
            clearable
            :options="concurrencyOptions"
          />
        </NFormItem>
      </NGi>
      <NGi :span="6">
        <NFormItem label="剧本类型" path="scriptType">
          <NSelect
            v-model:value="model.scriptType"
            placeholder="请选择剧本类型"
            clearable
            :options="scriptTypeOptions"
          />
        </NFormItem>
      </NGi>
    </NGrid>
    <div class="flex justify-end gap-2 mt-4">
      <NButton @click="handleReset">重置</NButton>
      <NButton type="primary" @click="handleSearch">搜索</NButton>
    </div>
  </NCard>
</template>

<script setup lang="ts">
import { NCard, NGrid, NGi, NFormItem, NInput, NSelect, NButton } from 'naive-ui';

defineOptions({
  name: 'ScriptSearch'
});

interface Emits {
  (e: 'search'): void;
  (e: 'reset'): void;
}

const emit = defineEmits<Emits>();

const model = defineModel<{
  scriptName: string | null;
  healthStatus: string | null;
  concurrency: string | null;
  scriptType: string | null;
}>('model', { required: true });

const healthStatusOptions = [
  { label: '健康', value: 'healthy' },
  { label: '异常', value: 'unhealthy' }
];

const concurrencyOptions = [
  { label: '1-5', value: '1-5' },
  { label: '6-10', value: '6-10' },
  { label: '11-20', value: '11-20' },
  { label: '20+', value: '20+' }
];

const scriptTypeOptions = [
  { label: '通知类', value: 'notification' },
  { label: '对话类', value: 'conversation' }
];

const handleSearch = () => {
  emit('search');
};

const handleReset = () => {
  Object.assign(model.value, {
    scriptName: null,
    healthStatus: null,
    concurrency: null,
    scriptType: null
  });
  emit('reset');
};
</script>
